<template>
	<div>
		<Select :value="value.pay" class="pay-select" @change="onCurrencyChange">
			<SelectOption value="zfb"> 支付宝 </SelectOption>
			<SelectOption value="yl"> 银联 </SelectOption>
		</Select>
		<Input class="pay-input" @change="onAccountChange" v-model:value="value.fac" />
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { Form, Select, SelectOption, Input } from 'ant-design-vue';

export type Currency = 'zfb' | 'yl';

interface PriceValue {
	pay: Currency;
	fac: string;
}

export default defineComponent({
	name: 'StepPriceInput',
	props: {
		value: { type: Object as PropType<PriceValue>, isRequired: true, default: () => {} },
	},
	components: { Select, Input, SelectOption },
	emits: ['update:value','change'],
	setup(props, { emit }) {
		const formItemContext = Form.useInjectFormItemContext();

		const triggerChange = (changeValue: Partial<PriceValue>) => {
			emit('update:value', { ...props.value, ...changeValue });
			emit('change', { ...props.value, ...changeValue });
			formItemContext.onFieldChange();
		};

		const onAccountChange = (e: ChangeEvent ) => {
			const account = (e.target as any).value;
			triggerChange({ fac: account });
		};
		const onCurrencyChange = (newCurrency: Currency) => {
			triggerChange({ pay: newCurrency });
		};

		return {
			onAccountChange,
			onCurrencyChange,
		};
	},
});
</script>
<style lang="less" scoped></style>
